<!DOCTYPE html>
<html>
  <head>
  <style>

  </style>
  </head>
  <body style="font: 75% Lucida Grande, Trebuchet MS">

    <div id="content">
    <p id="log" style="color: gray"></p>
       <p>Pick a file below or drag one into this area <br> <input type="file" id="file" /></p>
          <p><b>Name:</b> <span id="fname"></span><br>
          <b>File Size:</b> <span id="fsize"></span><br>
          <b>File is .OBJ:</b> <span id="flog"></span><br>
          <b>Canvas: </b> <canvas id="canvas-disp" width="400" height="100"></canvas><br>
          <b>Eval: </b> <textarea id="eval" rows=10 cols=35>
          ctx.strokeText("testing the canvas!", 10, 10); for(var i=0; i<100; i+=10) { ctx.strokeRect(20,20,i,30); }
          </textarea><br>
          <b>Content:</b> <br><br> <span id="file-content"></span>
          </p>
           </div>
    <script>
      // Content section used alot
      var content = document.getElementById('content');
      
      if (!window.FileReader) {
        content.innerHTML = "<p>This browser doesnt support the File API</p>";
      } else {

        // http://stackoverflow.com/questions/190852/how-can-i-get-file-extensions-with-javascript
        function getFileExtension(filename) {
            var ext = /^.+\.([^.]+)$/.exec(filename);
            return ext == null ? "" : ext[1];
        }

        // Prints out file properties.
        function displayFile(file) {
          document.getElementById('fname').textContent = file.fileName;
          document.getElementById('fsize').textContent = file.fileSize;


            if ( getFileExtension(file.fileName) == 'obj' ) {
                document.getElementById('flog').innerHTML = 'yes';
            } else {
                document.getElementById('flog').innerHTML = 'no';
            } 
      
          var reader = new FileReader();
      
          reader.onload = function(event) {
            if (document.getElementById('file-content')) {
            document.getElementById('file-content').innerHTML = 
              event.target.result.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n|\r/g, '<br>');
            }
          };
      
          reader.onerror = function() {
            document.getElementById('file-content').innerHTML = 'Unable to read ' + file.fileName;
          };
      
          reader.readAsBinaryString(file);
        }
      
        // Input handlers
        document.getElementById('file').onchange = function() {
          displayFile(this.files[0]);
        };
        // the textarea eval for canvas
        document.getElementById('eval').onchange = function() {
          var canvas = document.getElementById ('canvas-disp');
          if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0,0,canvas.width, canvas.height);
          }
            eval(this.value);
        };

      
        // Reduce movement by adding invisible border
        content.style.border = '4px solid transparent';
      
        // Add dragging events
        content.ondragenter = function() {
          content.style.border = '4px solid #b1ecb3';
          return false;
        };
      
        content.ondragover = function() { return false; };
        content.ondragleave = function() { return false; };
        content.ondrop = function(event) {
          content.style.border = '4px solid transparent';
          displayFile(event.dataTransfer.files[0]);
          return false;
        };
      }
    </script>
  </body>
</html>
